<template>
  <div class="com-container">
      <div class="com-chart" ref='rank_ref'></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return{
            //echarts实例对象
            chartInstance:null,
            //保存服务器返回的数据
            allData:null,
            startValue:0, // 区域缩放起点值
            endValue:9,  // 区域缩放终点值
            timerId:null //定时器标识
        }
    },
    created() {
        //在组件创建的时候进行webSocket回调函数的注册
        this.$socket.registerCallBack('rankData',this.getData)
    },
    computed:{
        ...mapState(['theme'])
    },
    watch:{
        theme(){
            this.chartInstance.dispose()  //销毁图表
            this.initChart()  //以最新的主题初始化图表
            this.screenAdapter()  //重新适配屏幕
            this.updatChart()  //更新数据
        }
    },
    mounted(){
        this.initChart()
        // this.getData()
        window.addEventListener('resize',this.screenAdapter)
        //页面加载完成主动进行屏幕的适配
        this.screenAdapter()
        //使用websocket发送给服务器
        this.$socket.send({
            action:'getData',
            socketType:'rankData',
            chartName:'rank',
            value:''
        })
    },
    destroyed() {
        // 在组件销毁时，将监听器取消（防止内存泄漏）
        window.removeEventListener('resize',this.screenAdapter)
        clearInterval(this.timerId)
        //在组件销毁的时候进行webSocket回调函数的取消
        this.$socket.unRegisterCallBack('rankData')
    },
    methods:{
        //初始化echarts实例对象
        initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.rank_ref,this.theme)
            //对图表初始化配置
            const initOption = {
                title:{
                    text:'▎地区销售排行',
                    left:20,
                    top:20
                },
                grid:{
                    top:'40%',
                    left:'5%',
                    right:'5%',
                    bottom:'5%',
                    containLabel:true

                },
                tooltip:{
                    show:true
                },
                xAxis:{
                    type:'category'
                },
                yAxis:{
                    type:'value'
                },
                series:[
                    {
                        type:'bar'
                    }
                ]
            }
            this.chartInstance.setOption(initOption)
            // 监听图表鼠标事件
            this.chartInstance.on('mouseover',()=>{
                clearInterval(this.timerId) //鼠标移入图表时关闭定时器
            })
            this.chartInstance.on('mouseout',()=>{
                this.startInterval() //鼠标移出图表时重新开启定时器
            })
        },
        // 获取服务器数据
        getData(ret){
            // let {data:ret} = await this.$http.get('rank')
            this.allData = ret
            this.allData.sort((a,b)=>{
                return b.value - a.value
            })
            this.updatChart()
            this.startInterval()
        },
        // 更新图表
        updatChart(){
            const colorArr = [
                ['#0BA82C','#4FF778'],
                ['#2E72BF','#23E5E5'],
                ['#5052EE','#AB6EE5']
            ]
            //处理图表数据
            //所有省份名称
            const provinceArr = this.allData.map(item=>{
                return item.name
            })
            // 省份数据
            const valueArr = this.allData.map(item=>{
                return item.value
            })
            // console.log(provinceArr)
            const updataOption = {
                xAxis:{
                    data: provinceArr
                },
                dataZoom:{
                    show:false,
                    startValue:this.startValue,
                    endValue: this.endValue
                },
                series:[
                    {
                        data:valueArr,
                        itemStyle:{
                            color: arg=>{
                                let targetColorArr = null
                                if(arg.value > 300){
                                    targetColorArr = colorArr[0]
                                }else if (arg.value > 200){
                                    targetColorArr = colorArr[1]
                                }else{
                                    targetColorArr = colorArr[2]
                                }
                                return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,[
                                    {
                                        offset:0,
                                        color:targetColorArr[0]
                                    },
                                    {
                                        offset:1,
                                        color:targetColorArr[1]
                                    }
                                ])
                            }
                        }
                    }
                ]
            }
            this.chartInstance.setOption(updataOption)
        },
        //当浏览器窗口发生变化时，改变图表的大小
        screenAdapter(){
            //图表标题的大小
            const titleFontSize = this.$refs.rank_ref.offsetWidth / 100 * 3.6
            //和分辨率大小相关的配置项
            const adapterOption = {
                title:{
                    textStyle:{
                        fontSize: titleFontSize
                    }
                },
                series:[
                    {
                        barWidth:titleFontSize,
                        itemStyle:{
                            barBorderRadius:[titleFontSize / 2,titleFontSize / 2,0,0]
                        }
                    }
                ]
            }
            this.chartInstance.setOption(adapterOption)
            // 调用图表的resize方法
            this.chartInstance.resize()
        },
        //区域缩放定时器
        startInterval(){
            if(this.timerId){
                clearInterval(this.timerId)
            }
            this.timerId = setInterval(()=>{
                this.startValue++
                this.endValue++
                if(this.endValue > this.allData.length - 1){
                    this.startValue = 0
                    this.endValue = 9
                }
                this.updatChart()
            },2000)
        }
    }
}
</script>

<style lang='less' scoped>

</style>